<!--
 * @Descripttion: 
 * @version: 
 * @Author: weihua.yao
 * @Date: 2021-04-13 23:41:32
 * @LastEditTime: 2021-04-13 23:47:59
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
</head>

<body>
  <div id="container" style="width: 800px;height: 800px;"></div>
  <script>
    var zr = zrender.init(document.getElementById('container'));
    var rect = new zrender.Rect({
      shape: {
        x: 0,
        y: 0,
        width: 50,
        height: 50
      },
      style: {
        fill: 'red',
        lineWidth: 0
      }
    });
    var line = new zrender.Polyline({
        shape: {
          points:[
            [100, 100],
            [250, 75],
            [300, 100]
          ]
        },
        style: {
          stroke: 'blue',
          lineWidth: 1
        }
      });
      var circle = new zrender.Circle({
        shape: {
          cx: 200,
          cy: 200,
          r: 50
        },
        style: {
          fill: 'red',
          stroke: 'green',
          lineWidth: 2
        }
      });
      var point = new zrender.Polyline({
        shape: {
          points:[
            [300, 300],
            [301, 301]
          ]
        },
        style: {
          stroke: 'black',
          lineWidth: 10
        }
      });
      zr.add(rect);
      zr.add(line);
      zr.add(circle);
      zr.add(point);
    zr.add(rect);
  </script>
</body>

</html>